<template>
  <div id="add_goods_id">
    <el-dialog
      :title="form.id === 0 ? '新增商品' : '修改商品'"
      :visible.sync="isShow.flag"
      width="100%"
      :before-close="handleClose"
      fullscreen
    >
      <el-tabs v-model="activeName">
        <el-tab-pane label="基础形象" name="first">
          <!-- 表单 -->
          <el-form
            ref="form"
            :model="form"
            label-width="80px"
            style="text-align: left"
            :rules="rules"
          >
            <el-form-item label="一级分类" prop="first_cateid">
              <el-select
                v-model="form.first_cateid"
                placeholder="请选择活动区域"
                @change="change_cate"
              >
                <el-option
                  :label="cate.catename"
                  :value="cate.id"
                  v-for="cate in cate_list"
                  :key="cate.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="二级分类" prop="second_cateid">
              <el-select
                v-model="form.second_cateid"
                placeholder="请选择活动区域"
              >
                <el-option
                  :label="cate.catename"
                  :value="cate.id"
                  v-for="cate in second_cate_list"
                  :key="cate.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品名称" prop="goodsname">
              <el-input v-model="form.goodsname"></el-input>
            </el-form-item>
            <el-form-item label="零售价格" prop="price">
              <el-input v-model="form.price"></el-input>
            </el-form-item>
            <el-form-item label="市场价格" prop="market_price">
              <el-input v-model="form.market_price"></el-input>
            </el-form-item>
            <el-form-item label="商品图片">
              <el-upload
                class="avatar-uploader"
                action=""
                :on-change="handleAvatarChange"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="规格名称" prop="specsid">
              <el-select
                v-model="form.specsid"
                placeholder="请选择活动区域"
                @change="change_specs"
              >
                <el-option
                  :label="space.specsname"
                  :value="space.id"
                  v-for="space in space_list"
                  :key="space.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="规格属性" prop="specsattr">
              <el-select v-model="form.specsattr" placeholder="请选择活动区域">
                <el-option
                  :label="attr"
                  :value="attr"
                  v-for="attr in space_attr_list"
                  :key="attr"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否热卖" prop="ishot">
              <el-radio-group v-model="form.ishot">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否新品" prop="isnew">
              <el-radio-group v-model="form.isnew">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="商品状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio :label="1">正常</el-radio>
                <el-radio :label="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>

          <!-- 表单 -->
        </el-tab-pane>
        <el-tab-pane label="商品详情" name="second">
          <wangeditor
            width="100%"
            height="500"
            id="description"
            ref="editor_ref"
          />
        </el-tab-pane>
      </el-tabs>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import wangeditor from "vue-wangeditor";
import { mapActions, mapState } from "vuex";
export default {
  props: ["isShow"],
  created() {
    this.CateAction();
    this.getSpace();
  },
  data() {
    return {
      second_cate_list: [],
      space_list: [],
      space_attr_list: [],

      imageUrl: "",
      form: {
        id: 0,
        first_cateid: "",
        second_cateid: "",
        goodsname: "",
        price: "",
        market_price: "",
        specsid: "",
        specsattr: "",
        ishot: 2,
        isnew: 2,
        status: 1,
        img: "",
        description: "",
      },
      activeName: "first",
      rules: {
        first_cateid: [
          { required: true, message: "一级分类不可以为空", trigger: "blur" },
        ],
        second_cateid: [
          { required: true, message: "二级分类不可以为空", trigger: "blur" },
        ],
        goodsname: [
          { required: true, message: "商品名称不可以为空", trigger: "blur" },
        ],
        price: [
          { required: true, message: "商品价格不可以为空", trigger: "blur" },
        ],
        market_price: [
          { required: true, message: "市场价格不可以为空", trigger: "blur" },
        ],
        specsid: [
          { required: true, message: "规格名称不可以为空", trigger: "blur" },
        ],
        specsattr: [
          { required: true, message: "规格属性不可以为空", trigger: "blur" },
        ],
        ishot: [
          { required: true, message: "是否热卖不可以为空", trigger: "blur" },
        ],
        isnew: [
          { required: true, message: "是否新品不可以为空", trigger: "blur" },
        ],
        status: [
          { required: true, message: "商品状态不可以为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    change_cate(id) {
      this.cate_list.forEach((obj) => {
        if (obj.id === id) {
          this.second_cate_list = obj.children;
          return "";
        }
      });
    },
    change_specs(id) {
      this.space_list.forEach((obj) => {
        if (obj.id === id) {
          this.space_attr_list = obj.attrs;
          return "";
        }
      });
    },
    handleAvatarChange(file){
      this.imageUrl = URL.createObjectURL(file.raw); //当图片发生修改，同步到页面上
      this.form.img = file.raw; //当图片发生修改，同步到表单数据结构当中
    },
    handleClose(){
      this.activeName = "first"
      this.form={
        id:0,
        first_cateid:'',
        second_cateid:'',
        goodsname:'',
        price:'',
        market_price:'',
        specsid:'',
        specsattr:'',
        ishot:2,
        isnew:2,
        status:1,
        img:'',
        description:'',
      }
      this.isShow.flag = false;
    },
    submit(){
      this.form.description = this.$refs.editor_ref.getHtml()
      var sendData = new FormData()
      for(let i in this.form){
        sendData.append(i,this.form[i])
      }
      var url = '/api/goodsadd'
      this.$http.post(url,sendData).then(res=>{
        if(res.code===200){
          this.handleClose()
          this.$emit('reload_goods')
        }
      })
    },
    ...mapActions("CateStore", ["CateAction"]),
    getSpace(){
      this.$http.get('/api/specslist').then(res=>{
        if(res.code===200){
          this.space_list = res.list
        }
      })
    }
  },
  components: {
    wangeditor,
  },
  computed: {
    ...mapState({
      cate_list: (state) => state.CateStore.cate_list,
    }),
  },
};
</script>

<style>
</style>